<template>
  <div>
    <!--连接-->
    <el-row>
      <el-col :span="16">
        <div class="link_1">
          <el-link type="primary" href="#/" :underline="false" class="l_link">贾豆</el-link>
          <el-link type="warning" href="#/reading" :underline="false" class="l_link">读书</el-link>
          <el-link type="success" href="#/music" :underline="false" class="l_link">音乐</el-link>
          <el-link type="danger" href="#/movie" :underline="false" class="l_link">电影</el-link>
          <el-link type="primary" href="#/beanindex" :underline="false" class="l_link">豆品</el-link>
          <el-link type="warning" :underline="false" class="l_link">同城</el-link>
          <el-link type="success" :underline="false" class="l_link">小组</el-link>
          <el-link type="danger" :underline="false" class="l_link">阅读</el-link>
          <el-link type="info" href="#/" :underline="false" class="l_link">关于我们</el-link>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="link_1">
          <el-link type="primary" href="#/read" :underline="false" class="l_link" style="margin-left: 80px">下载客户端
          </el-link>
          <el-link type="primary" href="#/read" :underline="false" class="l_link">登录/注册</el-link>
        </div>
      </el-col>
    </el-row>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="header_1">
          <el-row>
            <el-col :span="24">
              <div class="header_2">
                <el-row>
                  <el-col :span="4" :offset="2">
                    <div class="header_2">
                      <div>贾豆音乐</div>
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div class="search">
                      <el-input type="text" v-model="input" placeholder="唱片名、表演者" style="width: 70%;float: left"/>
                      <el-button icon="el-icon-search" style="float: left;margin-top: 26px;margin-left: 30px" circle>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <!--音乐连接-->
                <el-row>
                  <el-col :span="22" :offset="2">
                    <div class="music_link">
                      <el-link href="#/" :underline="false" class="m_link">音乐人</el-link>
                      <el-link href="#/" :underline="false" class="m_link">潮潮豆瓣音乐周</el-link>
                      <el-link href="#/" :underline="false" class="m_link">金羊毛计划</el-link>
                      <el-link :underline="false" class="m_link">排行榜</el-link>
                      <el-link :underline="false" class="m_link">专题</el-link>
                      <el-link :underline="false" class="m_link">乐评</el-link>
                      <el-link :underline="false" class="m_link">2019年度榜单</el-link>
                      <el-link :underline="false" class="m_link">阿比鹿音乐奖</el-link>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--main-->
    <!-- 轮播图 -->
    <el-row>
      <el-col :span="20" :offset="2">
        <div>
          <el-carousel indicator-position="outside" height="400px">
            <el-carousel-item v-for="(item,index) in imList" :key="index">
              <el-image :src="item.img"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 20px">
      <el-col :span="24">
        <div class="main_1">
          <!--热门链接-->
          <el-row>
            <el-col :span="24">
              <div class="main_2">
                <el-col :span="3" :offset="2">
                  <div class="main_3">
                    新碟榜
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="main_4">
                    <el-link href="#/" :underline="false" class="n_link">最热</el-link>
                    <el-link href="#/" :underline="false" class="n_link">华语</el-link>
                    <el-link href="#/" :underline="false" class="n_link">欧美</el-link>
                    <el-link href="#/" :underline="false" class="n_link">日韩</el-link>
                    <el-link href="#/" :underline="false" class="n_link">单曲</el-link>
                  </div>
                </el-col>
                <el-col :span="1">
                  <div class="main_5">
                    <el-link :underline="false">更多</el-link>
                  </div>
                  <div>

                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="product">
                <el-col :span="13" :offset="2">
                  <div class="product_1">
                    <el-row class="content" :gutter="45">
                      <el-col :span="6" v-for="(item,index) in musics" :key='index'>
                        <div class="content1">
                          <el-link @click="findOne(item.yid)" :underline="false" style="color: #37a">
                            <el-image style="height:150px" :src="item.zsrc"/>
                          </el-link>
                        </div>
                        <div class="content2">
                          <el-link @click="findOne(item.yid)" :underline="false" style="color: #37a">{{item.zname}}
                            <span style="color: #e09015">8.0</span>
                          </el-link>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" class="page">
                        <div class="block">
                          <el-pagination
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="params.pageSie"
                            :current-page="params.pageNum"
                            v-on:current-change="currentChange">
                          </el-pagination>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="product_2">
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div style="float: left">
                            热门音乐人分类&nbsp;&nbsp;
                          </div>
                          <div style="float: right">
                            <el-link :underline="false">更多</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">1&nbsp;&nbsp;流行</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">2&nbsp;&nbsp;摇滚</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">3&nbsp;&nbsp;电子</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">4&nbsp;&nbsp;爵士</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">5&nbsp;&nbsp;轻音乐</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">6&nbsp;&nbsp;古典</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="22">
                        <div class="koubei">
                          <div class="cli">
                            <el-link :underline="false" class="koubeilink">7&nbsp;&nbsp;说唱</el-link>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!--footer-->
    <el-row>
      <el-col :span="24">
        <div class="footer">
          © 2020－2020 jiadou.com, all rights reserved
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from "axios"

  export default {
    name: "music",

    data() {
      return {
        input: "",

        imList: [
          {
            img: "http://qargel3iz.bkt.clouddn.com/Rotation1.jpg",
          },
          {
            img: "http://qargel3iz.bkt.clouddn.com/Rotation2.jpg",
          },
          {
            img: "http://qargel3iz.bkt.clouddn.com/Rotation3.jpg"
          },
          {
            img: "http://qargel3iz.bkt.clouddn.com/Rotation4.jpg"
          }
        ],
        musics: [],
        params: {
          pageSie: 8,
          pageNum: 1
        },
        total: 30,
      }
    },
    methods: {
      findAll: function () {
        var _this = this
        //查询数据进行展示
        axios.get('/bean/findAll/' + _this.params.pageSie + "/" + _this.params.pageNum).then(function (res) {
          _this.musics = res.data.musicList
          _this.total = res.data.total
        })
      },
      findOne: function (id) {
        this.$router.push('/details/' + id)

      },
      currentChange: function (page) {
        this.params.pageNum = page;
        this.findAll();
      }
    },
    mounted: function () {
      this.findAll();
    }
  }
</script>

<style scoped>
  .link_1 {
    height: 30px;
    background-color: #545652;
  }

  .l_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: whitesmoke;
  }

  .m_link {
    line-height: 30px;
    font-size: 14px;
    margin: 0 15px;
    float: left;
    color: blue;
  }

  .n_link {
    line-height: 40px;
    font-size: 14px;
    margin: 0 10px;
    float: left;
    color: darkgray;
  }

  .header_1 {
    height: 140px;
    background-color: azure;
    /*border: 1px solid darkgreen;*/
    margin-bottom: 15px;
  }

  .header_2 {
    height: 90px;
    font-weight: bold;
    font-size: 36px;
    color: skyblue;
    line-height: 90px;
    /*border: 1px solid darkblue;*/
  }

  .music_link {
    /*border: 1px solid darkgoldenrod;*/
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .main_1 {
    /*border: 1px solid darkgray;*/
    height: 500px;
  }

  .main_2 {
    height: 40px;
    /*border: 1px solid darkgray;*/
  }

  .main_3 {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    width: 100%;
  }

  .main_4 {
    height: 40px;
    /*border: 1px solid darkgray;*/
    line-height: 40px;
    font-weight: bold;
    width: 100%;
  }

  .main_5 {
    height: 40px;
    /*border: 1px solid darkgray;*/
    line-height: 40px;
    float: left;
    font-size: 14px;
    width: 100%;
    color: blue;
  }

  .footer {
    height: 60px;
    line-height: 60px;
    background-color: #545652;
    color: whitesmoke;
    font-size: 14px;
  }

  .product_1 {
    height: 450px;
    /*border: 1px solid skyblue;*/
    margin-left: 30px;
  }

  .product_2 {
    height: 450px;
    /*border: 1px solid greenyellow;*/
  }

  .content1 {
    /*border: 1px solid greenyellow;*/
    width: 100%;
    height: 150px;
  }

  .content2 {
    /*border: 1px solid greenyellow;*/
    padding: 8px;
  }

  .content {
    padding: 20px 0px 10px 0px;
  }

  .page {
    /*border: 1px solid darkgoldenrod;*/
    height: 40px;
  }

  .footer {
    height: 60px;
    line-height: 60px;
    /*border: 1px solid skyblue;*/
    background-color: #545652;
    color: whitesmoke;
    font-size: 14px;
  }

  .koubei {
    height: 50px;
    font-weight: bold;
    line-height: 50px;
    margin-left: 80px;
    border-bottom: 1px solid silver;
  }

  .koubeilink {
    line-height: 50px;
    color: #37a;
  }

  .cli {
    float: left;
    font-size: 14px;
    margin-left: 20px;
    color: #37a;
  }
</style>
